<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打印订单</title>
    <style>
        body {
            margin: 0;
            padding: 10px;
            width: 80mm;
            font-family: Arial, sans-serif;
            font-size: 12px;
        }
        .print-header {
            text-align: center;
            margin-bottom: 10px;
        }
        .print-header h2 {
            margin: 0;
            padding: 5px 0;
        }
        .order-items {
            border-top: 1px dashed #000;
            border-bottom: 1px dashed #000;
            padding: 10px 0;
        }
        .item-row {
            display: flex;
            justify-content: space-between;
            margin: 5px 0;
        }
        .customer-info {
            margin: 10px 0;
        }
        .customer-info div {
            margin: 5px 0;
        }
        .print-footer {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="print-content">
        <div class="print-header">
            <h2>配送订单</h2>
            <div id="orderId"></div>
            <div id="orderTime"></div>
        </div>
        <div class="print-body">
            <div id="orderItems" class="order-items">
            </div>
            <div class="customer-info">
                <div id="address"></div>
                <div id="phone"></div>
            </div>
        </div>
        <div class="print-footer">
            <div>请确认商品后签字：________________</div>
        </div>
    </div>
    <script>
        const { ipcRenderer } = require('electron');
        
        ipcRenderer.on('order-data', (event, order) => {
            document.getElementById('orderId').textContent = `订单号：${order.ticket_id}`;
            document.getElementById('orderTime').textContent = `时间：${order.created_at}`;
            document.getElementById('address').textContent = `送货地址：${order.address}`;
            document.getElementById('phone').textContent = `联系电话：${order.phone}`;
            
            const itemsContainer = document.getElementById('orderItems');
            order.description.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'item-row';
                itemDiv.innerHTML = `
                    <span>${item.name}</span>
                    <span>x${item.count}</span>
                    <span>￥${item.price}</span>
                `;
                itemsContainer.appendChild(itemDiv);
            });

            // 通知主进程模板已准备好
            ipcRenderer.send('print-ready');
        });
    </script>
</body>
</html>